/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var FontAwesome = require('../common/font/fontawesome');
var Constants = require('../common/style/constants');
import Camera from 'react-native-camera';
var {
  PixelRatio,
  Navigator,
  ScrollView,
  StyleSheet,
  Text,
  TouchableHighlight,
  TouchableOpacity,
  View,
  Component,
  AppRegistry,
  Platform,
  Dimensions
} = React;

var ResultPage = require('./result');


class ChapterPageUI extends Component{

  componentDidMount(){
    this.stopBarcodeAction = false;
  }

  render() {
    return (
      <View style={{flex:1, marginTop:Constants.NAVBAR_HEIGHT, backgroundColor:'#f1f1f1'}}>
        <Camera
          ref={(cam) => {
            this.camera = cam;
          }}
          style={styles.preview}
          onBarCodeRead={this.onBarCodeRead.bind(this)}
          aspect={Camera.constants.Aspect.fill}>
          <Text style={styles.capture} onPress={this.takePicture.bind(this)}>请扫描产品二维码 {'\n'}（你可以在产品内外包装中找到）</Text>
        </Camera>
      </View>
    );
  }

  takePicture(){
    this.props.navigator.push(ResultPage);
    //this.camera.capture().then((data) => console.log(data)).catch(err => console.error(err));
  }

  onBarCodeRead(e){
    if(this.stopBarcodeAction==false){
      
      this.stopBarcodeAction = true;
      this.props.navigator.push(ResultPage);
    }
  }

};

var ChapterPage = {
  title: '扫描二维码',
  viewClass: ChapterPageUI
};

var styles = React.StyleSheet.create({
 preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
    height: Dimensions.get('window').height,
    width: Dimensions.get('window').width
  },
  capture: {
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    color: '#000',
    padding: 10,
    margin: 40,
    opacity:0.4,
    textAlign:'center'
  }
});

module.exports = ChapterPage;
